<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>保单信息-我的申请</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/mescroll.min.css">
    <link href="css/common.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            -webkit-touch-callout:none;
            -webkit-tap-highlight-color:transparent;
        }
        *:not(input,textarea) {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
        }

        .mui-input-group {
            margin-top: 10px;
        }
        .totalNum{
            text-align: right;
        }
        .mui-table-view{
            margin-top: 10px;
        }
        /*mescroll 滚动区域*/
        .mescroll{
            position: fixed;
            top: 44px;
            bottom: 54px;
            height: auto;
        }
        /*回到顶部按钮*/
        .mescroll-totop{
            bottom: 140px;
            font-size: 12px;
            line-height: 10px;
            background-color: white;
            border: 1px solid gray;
            text-align: center;
        }
        .mescroll-totop p{
            padding-top: 6px;
            color: #666;
        }
        /*无数据提示*/
        .mescroll-upwarp{
            padding: 15px 0 0 0;
        }

        .mui-btn, button, input[type=button], input[type=reset], input[type=submit]{
            padding: 6px 8px;
        }
        .my-table-btn{
            padding: 11px 15px 5px 15px;
        }
        .my-table-btn .mui-btn{
            margin-bottom: 6px;
        }
        .mui-popup-button.mui-popup-button-bold{
            font-weight: 400;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
    <h1 class="mui-title">保单信息-我的申请</h1>
</header>
<!--滑动区域-->
<div id="mescroll" class="mescroll">
    <div>
        <div  class="mui-input-group">
            <div class="mui-input-row">
                <label>订单状态</label>
                <select class="mui-input-clear mui-input" name="orderstatus">
                    <option value="">全部</option>
                    <option value="SHZ">审核中</option>
                    <option value="YSH">已审核</option>
                    <option value="DFK">待付款</option>
                    <option value="YFK">已付款</option>
                </select>
            </div>
            <div class="mui-input-row">
                <label>车主姓名</label>
                <input name='keyWords' type="text" class="mui-input-clear mui-input" placeholder="请输入车主姓名" value="">
            </div>
        </div>

        <div class="mui-content-padded" style="margin-top: 10px;">
            <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="searchBtn">查询</button>
        </div>

        <div class="mui-content-padded" style="margin-top: 20px; display: none;">
            <div class="totalNum"><h5 id="totalNum"></h5></div>
        </div>
    </div>


    <!--搜索结果-->
    <div id="dataList" class="data-list">
        <!--<ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <h5>投  保 人：姚投保</h5>
                        <h5>车主姓名：李车险</h5>
                        <h5>身份证号：3102*********232**</h5>
                        <h5>申请进度：<span style="color: #007aff;">已提交</span></h5>
                        <h5>申请时间：2017-11-28 13:58:16</h5>
                        <h5>审核时间：2017-11-28 13:58:16</h5>
                        <h5>签约日期：2017-12-15</h5>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell my-table-btn">
                <div class="mui-table" id="test">
                    <div class="mui-table-cell mui-col-xs-10">
                        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">补件</button>
                        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">报价信息</button>
                        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">付款信息</button>
                        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">支付反馈</button>
                        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">取消</button>
                    </div>
                </div>
            </li>
        </ul>-->
    </div>

</div>
<footer></footer>
</body>
<script src="js/jquery.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/wxOpen.js"></script>
<script src="js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
    //创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
    var mescroll = new MeScroll("mescroll", {
        down: {
            use : false  //禁用上拉刷新，默认开启
        },
        up: {
            page: {
                num : 0 ,
                size : 20 ,
                time : null
            },
            callback: upCallback,
            clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
            isBounce: false, //此处禁止ios回弹
            noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
            empty: {
                tip: "没有您要找的信息" //提示
            },
            toTop:{ //配置回到顶部按钮
                html : "<p>^<br/>顶部<p>", //标签内容,默认null; 如果同时设置了src,则优先取src
                offset : 500
            }
        }
    });

    //当前关键词
    var orderStatus = "", //订单状态
        keyWords = "";    //车主姓名

    $('select[name="orderstatus"]').change(function () {
        orderStatus = $(this).val();
    });

    //搜索按钮
    $("#searchBtn").click(function(){
        keyWords = $.trim($('input[name="keyWords"]').val()); //更新关键词
        mescroll.resetUpScroll(); //重新搜索,重置列表数据
    });

    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    function upCallback(page) {
        $.ajax({
            url: url + "weixinOrder/orderApplicationList?openId=" + openId + "&page=" + page.num + "&size=" + page.size + "&wxOrderStatus=" + orderStatus + "&keyWords=" + keyWords,
            success: function(curPageData) {
                if (curPageData.repCode == "000000") {
                    var convertData = $.parseJSON(curPageData.data);
                    console.log(convertData.orderApplicationList);
                    //console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+convertData.orderApplicationList.length);

                    $("#totalNum").text("共"+ convertData.totalCount + "条数据").parent().parent(".mui-content-padded").show();
                    mescroll.endByPage(convertData.orderApplicationList.length, curPageData.totalPage);
                    //加载列表数据
                    setListData(convertData.orderApplicationList);
                }else if(curPageData.repCode == "999999") {
                    mui.toast("获取数据失败");
                }
            },
            error: function(e) {
                //联网失败的回调,隐藏下拉刷新和上拉加载的状态
                mescroll.endErr();
            }
        });
    }

    /*设置列表数据*/
    function setListData(curPageData){
        var result = "";
        for (var i = 0; i < curPageData.length; i++) {
            result += '<ul class="mui-table-view">';
            result += '<li class="mui-table-view-cell">';
            result += '<div class="mui-table">';
            result += '<div class="mui-table-cell mui-col-xs-10">';
            if(curPageData[i].consumerType == "GR"){
                result += '<h5>车主姓名：'+ curPageData[i].consumerName +'</h5>';
                result += '<h5>身份证号：'+ curPageData[i].consumerIdCard +'</h5>';
            }else if(curPageData[i].consumerType == "QY"){
                result += '<h5>企业名称：'+ curPageData[i].enterpriseName +'</h5>';
                result += '<h5>营业证号：'+ curPageData[i].enterpriseLicence +'</h5>';
            }
            result += '<h5>申请进度：<span style="color: #007aff;">'+ curPageData[i].wxOrderStatusText +'</span></h5>';
            result += '<h5>申请时间：'+ curPageData[i].applyTime +'</h5>';
            result += '<h5 style="display: none">审核时间：'+ curPageData[i].auditingTime +'</h5>';
            result += '<h5 style="display: none">签约日期：'+ curPageData[i].signTime +'</h5>';
            result += '</div>';
            result += '</div>';
            result += '</li>';
            result += '<li class="mui-table-view-cell my-table-btn">';
            result += '<div class="mui-table">';
            result += '<div class="mui-table-cell mui-col-xs-10">';
            //审核中-待补件
            if(curPageData[i].sysOrderStatus == 1){
                result += '<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="applyInfo(\'ip_apply_orde_patch\',\''+ curPageData[i].orderCode +'\',\''+ curPageData[i].consumerType +'\',\''+ curPageData[i].consumerName +'\',\''+ curPageData[i].consumerIdCard +'\',\''+ curPageData[i].enterpriseName +'\',\''+ curPageData[i].enterpriseLicence +'\',\''+ curPageData[i].wxOrderStatusText +'\',\''+ curPageData[i].applyTime +'\',\''+ curPageData[i].auditingTime +'\',\''+ curPageData[i].signTime +'\',\''+ curPageData[i].remark +'\',\''+ curPageData[i].makeupFile +'\')">补件</button> ';
            }else{
                result += '<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="mui.toast(\'当前不需要补件\');">补件</button> ';
            }
            //已审核-已报价
            if(curPageData[i].sysOrderStatus == 6){
                result += '<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="applyInfo(\'ip_apply_patch_info\',\''+ curPageData[i].orderCode +'\',\''+ curPageData[i].consumerType +'\',\''+ curPageData[i].consumerName +'\',\''+ curPageData[i].consumerIdCard +'\',\''+ curPageData[i].enterpriseName +'\',\''+ curPageData[i].enterpriseLicence +'\',\''+ curPageData[i].wxOrderStatusText +'\',\''+ curPageData[i].applyTime +'\',\''+ curPageData[i].auditingTime +'\',\''+ curPageData[i].signTime +'\')">报价信息</button> ';
            }else {
                result += '<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="mui.toast(\'当前没有报价信息\');">报价信息</button> ';
            }
            //待付款-已确认
            if(curPageData[i].sysOrderStatus == 8){
                result += '<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="applyInfo(\'ip_apply_pay_info\',\''+ curPageData[i].orderCode +'\',\''+ curPageData[i].consumerType +'\',\''+ curPageData[i].consumerName +'\',\''+ curPageData[i].consumerIdCard +'\',\''+ curPageData[i].enterpriseName +'\',\''+ curPageData[i].enterpriseLicence +'\',\''+ curPageData[i].wxOrderStatusText +'\',\''+ curPageData[i].applyTime +'\',\''+ curPageData[i].auditingTime +'\',\''+ curPageData[i].signTime +'\')">付款信息</button> ';
            }else {
                result += '<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="mui.toast(\'当前没有付款信息\');">付款信息</button> ';
            }
            result += '<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="applyInfo(\'ip_apply_voucher\',\''+ curPageData[i].orderCode +'\',\''+ curPageData[i].consumerType +'\',\''+ curPageData[i].consumerName +'\',\''+ curPageData[i].consumerIdCard +'\',\''+ curPageData[i].enterpriseName +'\',\''+ curPageData[i].enterpriseLicence +'\',\''+ curPageData[i].wxOrderStatusText +'\',\''+ curPageData[i].applyTime +'\',\''+ curPageData[i].auditingTime +'\',\''+ curPageData[i].signTime +'\')">支付反馈</button> ';
            result += '<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined cancelBtn" data-loading-icon="mui-spinner" data-loading-text="提交中..." order="'+ curPageData[i].orderCode +'">取消</button>';
            result += '</div>';
            result += '</div>';
            result += '</li>';
            result += '</ul>';
        }
        $("#dataList").append(result);
    }

    //取消保单
    mui(document.body).on('tap', '.cancelBtn', function() {
        var _this = this;
        var orderCode = $(this).attr("order");

        var btnArray = ['是', '否'];
        mui.confirm('确定取消吗？', ' ', btnArray, function(e) {
            if (e.index == 0) {
                mui(_this).button('loading');
                $.ajax({
                    type:"POST",
                    url: url + 'weixinOrder/cancelOrder',
                    dataType:"json",
                    data:{
                        "openId":openId,
                        "orderCode":orderCode
                    },
                    cache:false,
                    success:function(data){
                        console.log(data);
                        if(data.repCode = "000000"){
                            mescroll.resetUpScroll(); //重新加载,重置列表数据
                            mui.toast("取消成功");
                        }else if(data.repCode == "999999") {
                            mui(_this).button('reset');
                            mui.toast("取消失败");
                        }
                    },
                    error:function(){
                        mui(_this).button('reset');
                        mui.toast("error");
                    }
                });
            } else {
                //console.log("取消");
            }
        })
    });
});

//按钮跳转链接
function applyInfo(path,orderCode,consumerType,consumerName,consumerIdCard,enterpriseName,enterpriseLicence,wxOrderStatusText,applyTime,auditingTime,signTime,remark,makeupFile) {
    window.location.href=""+path+".html?orderCode="+orderCode+"&consumerType="+consumerType+"&consumerName="+consumerName+"&consumerIdCard="+consumerIdCard+"&enterpriseName="+enterpriseName+"&enterpriseLicence="+enterpriseLicence+"&wxOrderStatusText="+wxOrderStatusText+"&applyTime="+applyTime+"&auditingTime="+auditingTime+"&signTime="+signTime+"&remark="+remark+"&makeupFile="+makeupFile;
}
</script>
</html>